<template>
	<view>
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>

		<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
			<view class="hander" :style="{ 'top': mt1 + 'px' }">
				<view class="hander-hander">
					<view class="search">
						<view class="cearch-list" :class="hourglassShow == true ? 'cearch-list1' : ''">
							<view class="search-left">
								<view class="left-one" @tap="timeShow = true">
									<view>
										<text>住店</text> <text
											style="color: #111111; margin: 0 6rpx; font-weight: bold;">{{ arrive }}</text>
									</view>
									<view>
										<text>离店</text> <text
											style="color: #111111; margin: 0 6rpx; font-weight: bold;">{{ leave }}</text>
									</view>
								</view>
								<view class="left-two"> 共{{ count }}晚 </view>
								<view class="left-three">
									<u-icon name="search"></u-icon>
								</view>
							</view>
							<view class="search-right">
								<input v-model="values" placeholder="请输入酒店名称" @blur="onChanges" class="input" />
							</view>
						</view>

					</view>
					<view class="tab" v-if="hourglassShow == false">
						<view class="searchCondition">
							<!-- 区域筛选 -->
							<span class="item" @click="areaShowed()" :class="areaShow == true ? 'arrow-up-fill' : ''">
								<u-icon name="arrow-down-fill" bold='true' v-if="areaShow == false" size="20"
									:label="areaVal" labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="areaVal" labelPos="left" labelSize="26"></u-icon>
							</span>
							<!-- 价格筛选 -->
							<span class="item" @click="listShowed()">
								<u-icon name="arrow-down-fill" bold='true' v-if="listShow == false" size="20"
									:label="listVal" labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="listVal" labelPos="left" labelSize="26"></u-icon>
							</span>
							<!-- 特色筛选 -->
							<span class="item" @click="sortShowed()" :class="sortShow == true ? 'arrow-up-fill' : ''">
								<u-icon name="arrow-down-fill" bold='true' v-if="sortShow == false" size="20"
									:label="sortVal" labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="sortVal" labelPos="left" labelSize="26"></u-icon>
							</span>
						</view>
						<view class="serchicon" @click="showCard = !showCard">
							<view class="" style="display: flex; align-items: center">
								<view class="" style="width: 24rpx; height: 24rpx; margin: 0 8rpx">
									<image style="width: 100%; height: 100%"
										src="https://i.ringzle.com/file/20240121/bc90dc2ab2034018a18ddc6313b95c1f.png"
										mode="aspectFill">
									</image>
								</view>
								<view class="" style="font-size: 24rpx; color: #666666; font-weight: Regular"
									v-if='showCard == true'>
									大图
								</view>
								<view class="" style="font-size: 24rpx; color: #666666; font-weight: Regular"
									v-else='showCard==false'>
									小图 </view>
							</view>
						</view>
					</view>

					<!--  区域筛选 -->
					<view class="content" :style="{ 'height': (h - mt) + 'px' }" v-show="areaShow">
						<view class="custom_popup">
							<view class="types">
								<view class="pricequjian" style="height: 240rpx;">
									<view class="jiage" v-for="(item, index) in list1" :key="index"
										@click="clickareaShow(item, index)">
										<view class="contentpeice" :class="{ 'Doublactive': item.region }">
											{{ item.name }}
											<view class="xuanzhong" v-if="item.region">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
									</view>
								</view>
								<view class="u-btn">
									<view class="left" @click="del">
										<text> 重置</text>
									</view>
									<view class="right" @click="add">
										<text>确定</text>
									</view>
								</view>

							</view>
						</view>
					</view>

					<!--  价格筛选 -->
					<view class="content" :style="{ 'height': (h - mt) + 'px' }" v-show="listShow">
						<view class="custom_popup">
							<view class="types">
								<text class="title" style="margin: 30rpx 0;">价格</text>

								<view style="padding: 0 10rpx 10rpx;">
									<slide-range ref="slideRange" :scale="{ interval: 1500 }" min="0" max="1500"
										:key="update" height="8" @change="changeSlide" :value="slideVal"
										:activeStyle="{ 'background': '#007A69' }"
										:backgroundStyle="{ 'background': '#EFEFEF' }">
										<template #firstBlock>
											<image class="block-image"
												src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
											</image>
										</template>
										<template #secondBlock>
											<image class="block-image"
												src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
											</image>
										</template>
									</slide-range>
								</view>



								<view class="pricequjian" style="height: 230rpx;">
									<view class="jiage" v-for="(item, index) in priceList" :key="index"
										@click="clickprice(item, index)">
										<view class="contentpeice" :class="{ 'Doublactive': currentIndex == item.id }"
											v-if='item.priceEnd == null'>
											{{ item.priceStart }}
											<view class="xuanzhong" v-if="currentIndex == item.id">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
										<view class="contentpeice" :class="{ 'Doublactive': currentIndex == item.id }"
											v-else-if='item.priceStart == null'>
											{{ item.priceEnd }}
											<view class="xuanzhong" v-if="currentIndex == item.id">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
										<view class="contentpeice" :class="{ 'Doublactive': currentIndex == item.id }"
											v-else>
											{{ item.priceStart }}-{{ item.priceEnd }}
											<view class="xuanzhong" v-if="currentIndex == item.id">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
									</view>
								</view>
								<view class="u-btn">
									<view class="left" @click="del">
										<text> 重置</text>
									</view>
									<view class="right" @click="add">
										<text>确定</text>
									</view>
								</view>

							</view>
						</view>
					</view>

					<!-- 特色筛选 -->
					<view class="content" :style="{ 'height': (h - mt) + 'px' }" v-show="sortShow">
						<view class="custom_popup">
							<view class="types">
								<view class="title" style="margin: 30rpx 0;"> 住宿类别 </view>
								<view class="text" style="display: flex; flex-wrap: wrap;">
									<view class="pricequjian" style="height: 100rpx; width: 100%;">
										<view class="jiage1" v-for="(item, index) in typeList" :key="index"
											@click="radioType(item.dictValue, index)">
											<view class="contentpeice" :class="{ 'Doublactive': typeIndex == index }">
												{{ item.dictLabel }}
												<view class="xuanzhong" v-if="typeIndex == index">
													<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
														alt="">
												</view>
											</view>
										</view>
									</view>
								</view>

								<view class="u-btn">
									<view class="left" @click="del">
										<text> 重置</text>
									</view>
									<view class="right" @click="add">
										<text>确定</text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="showCard">

				<view class="card" v-if="showCard">
					<view class="" v-for="(item, index) in searchList" :key="index">
						<view class="card-store" @click="cardBtn(item)">
							<view class="card-left">
								<image :src="item.cover" mode="aspectFill"></image>
								<text class="text" v-if="item.isTransfer == 1"> 码头接送</text>
								<text v-else></text>
							</view>
							<view class="card-right" :class="item.bottomPrice !== null ? '' : 'gray'">
								<view class="card-title" :class="item.bottomPrice !== null ? '' : 'gray'">
									{{ item.name }}
								</view>
								<view class="card-text">
									<!-- 暂无 -->
									{{ item.islandName }}
									<view></view>
									{{ item.categorytext == undefined ? '' : item.categorytext }}
								</view>
								<view class="card-text1">
									<text v-for="ite, ids in item.featureLabelList">{{ ite }}</text>
								</view>

								<view class="card-price">
									<text v-if='item.bottomPrice !== null'>
										<text style="font-size: 24rpx; font-weight: Regular;">￥</text>
										<text style="font-weight: bold; font-size: 36rpx;">
											{{ item.bottomPrice }}</text>
										<text
											style="font-size: 24rpx; padding: 0 6rpx 0;  font-weight: Regular;">起</text>
									</text>
									<text v-else>暂无可预订房型</text>
								</view>
							</view>
						</view>
					</view>
					<nodata class="nodatadiv" v-if="searchList.length === 0"></nodata>
				</view>

				<view class="card1" v-else>
					<view v-for="(item, index) in searchList" :key="index">
						<view class="ticketList" @click.stop="circle">
							<view class="u-swiper-hander">
								<image class="images" :src="item.cover" mode="aspectFill" @click.stop="cardBtn(item)">
								</image>
							</view>
							<view style="font-size: 32rpx; font-weight: 600; margin: 16rpx 24rpx"
								:class="item.bottomPrice !== null ? '' : 'gray'">{{ item.name }}
							</view>
							<view class="card-text" :class="item.bottomPrice !== null ? '' : 'gray'">
								{{ item.islandName }}
								<view></view> {{ item.categorytext == undefined ? '' : item.categorytext }}
							</view>
							<view class="ticketList_tag" :class="item.bottomPrice !== null ? '' : 'gray'">
								<u-tag v-for="(ite, ids) in item.featureLabelList" :text="ite" type="success" plain
									size="mini" borderColor="#DCC7AB" color="#C9A771">
								</u-tag>
							</view>
							<view class="ticketList_price" :class="item.bottomPrice !== null ? '' : 'gray'">
								<view class="ticketList_price_money"
									style="font-size: 40rpx; font-weight: bold; width: 480rpx"
									v-if="item.bottomPrice !== null">
									<view style="font-size: 22rpx; padding: 6rpx"> ￥ </view>
									{{ item.bottomPrice }}
									<view style="font-size: 22rpx; padding: 6rpx"> 起 </view>
								</view>
								<view class="ticketList_price_money"
									style="font-size: 48rpx; font-weight: 600; width: 480rpx" v-else>
									暂无房间
								</view>
							</view>
						</view>

					</view>
					<nodata class="nodatadiv" v-if="searchList.length === 0"></nodata>
				</view>
			</view>
			<uni-load-more :status="status" color="#007aff" />

			<!-- 选择入驻时间 -->
			<u-calendar class="u-time" startText="住店" endText="离店" confirmDisabledText="请选择离店日期" :show="timeShow"
				:mode="mode" @confirm="confirm" @close="closeDate" :closeOnClickOverlay="true"></u-calendar>



		</view>
	</view>

</template>

<script>
	import slideRange from "@/components/tianzai-slider-range/index.vue";
	import TopTabs from "@/compoments/TopTabs/topTabs.vue";
	import nodata from '@/compoments/NoData/index1.vue'
	export default {
		components: {
			TopTabs,
			nodata,
			slideRange
		},
		data() {
			return {
				update: false,
				slideVal: [100, 300],
				title: "酒店民宿",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				mt1: uni.getSystemInfoSync().statusBarHeight + 39,
				arrveList: [],
				hourglassShow: false,
				status: 'more', //加载状态
				mode: 'range',
				list1: [{
					name: '全部',
					id: ''
				}],
				AddressList: [],
				values: "",
				cardList: [],
				showCard: true,
				currentNum: null,
				FormData: {
					arriveDate: "", //	到达时间(yyyy-MM-dd)
					leaveDate: "", //离开时间(yyyy-MM-dd)
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					name: "",
					islandId: '', //岛屿id
					priceSort: '', //价格排序: 1有高高低, 0由低到高
					featureLabels: '', //	特色服务(逗号分割):字典FeatureLabels
					category: '', //	酒店类别(逗号分割): 字典HotelCategory
					priceStart: '',
					priceEnd: ''
				},
				searchList: {},
				listImage: [],
				arrive: "",
				leave: "",
				count: "",
				priceIndex: 0,
				featureIndex: 0,
				typeIndex: null,
				key: 1,
				timeShow: false,
				priceList: {
					0: "由高到低",
					1: "由低到高",
				},

				featureList: [],
				typeList: [],
				index: 0,
				departWeek: '',
				departWeeks: '',
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				category: '',
				categorytext: "",
				currentIndex: 0,
				priceList: [{
						id: 0,
						priceStart: '不限',
						priceEnd: null,
					},
					{
						id: 1,
						priceStart: '0',
						priceEnd: '150以下',
					},
					{
						id: 2,
						priceStart: '150',
						priceEnd: '200',
					},
					{
						id: 3,
						priceStart: '200',
						priceEnd: '350',
					},
					{
						id: 4,
						priceStart: '350',
						priceEnd: '650',
					},
					{
						id: 5,
						priceStart: '650',
						priceEnd: '1050',
					},
					{
						id: 6,
						priceStart: '1050',
						priceEnd: '1500',
					},
					{
						id: 7,
						priceStart: null,
						priceEnd: '1500以上',
					},
				],
				listShow: false,
				List: [
					['渔家乐', '地方菜系', '海鲜自助', '小吃快餐', '咖啡甜品']
				],
				listVal: '价格',
				sortVal: '筛选',
				sortShow: false,
				sort: [
					['默认排序', '好评优先', '距离优先', '高价优先', '低价优先', '星级']
				],
				areaVal: '区域',
				areaShow: false,
				area: [
					['全部']
				],
				featureLabelsLIst: [],
				regionList: [],
				areaValList: []

			};
		},
		computed: {},
		//上拉加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading'
				uni.showNavigationBarLoading()
				this.FormData.page++
				this.getList()
				this.getHotelCategory()
			}
		},

		onLoad(e) {
			// uni.removeStorageSync('islandId');
			this.getDict();
			if (e.list !== {} && e.list !== undefined) {
				let obj = JSON.parse(e.list)
				// 存储数据
				wx.setStorageSync("obj", obj)

				// 获取数据
				let areaVal = wx.getStorageSync("listAreaVal")

				this.FormData.arriveDate = obj.arriveDate;
				this.FormData.leaveDate = obj.leaveDate;
				this.FormData.name = obj.name;
				this.FormData.islandId = obj.islandId;
				this.count = obj.count;
				this.areaVal = areaVal[0].name || '区域';
				// this.key = 0
				this.arrive = obj.arriveDate.slice(5, 7) + "-" + obj.arriveDate.slice(8, 10);
				this.leave = obj.leaveDate.slice(5, 7) + "-" + obj.leaveDate.slice(8, 10);


				this.getData();
				this.getAddressList()


			} else {

				let objList = JSON.parse(wx.getStorageSync("cpzsParams"))

				this.FormData.arriveDate = objList.startDate;
				this.FormData.leaveDate = objList.endDate;
				// 开始 时间
				this.arrive = objList.startDate.slice(5, 7) + "-" + objList.startDate.slice(8, 10);
				// 结束时间
				this.leave = objList.endDate.slice(5, 7) + "-" + objList.endDate.slice(8, 10);
				this.getData();
				// this.getIndex()
				this.getAddressList()
				this.key = 1;
			}



		},

		methods: {
			changeSlide(e) {
				this.FormData.priceStart = e.firstValue;
				this.FormData.priceEnd = e.secondValue
			},

			areaShowed() {
				this.areaShow = !this.areaShow
				this.listShow = false
				this.sortShow = false


				let ids = this.FormData.islandId.split(',')

				ids.forEach(item => {
					let b = this.list1.findIndex(a => a.id == item)
					this.$set(this.list1[b], 'region', true)
				})




			},
			listShowed() {
				this.listShow = !this.listShow
				this.sortShow = false
				this.areaShow = false
			},
			sortShowed() {
				this.sortShow = !this.sortShow
				this.listShow = false
				this.areaShow = false
			},



			clickprice(e, i) {

				this.currentIndex = i;
				if (e.id == 0) {
					this.FormData.priceStart = '';
					this.FormData.priceEnd = '';
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else if (e.id == 1) {
					this.FormData.priceStart = '';
					this.FormData.priceEnd = 150;
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else if (e.id == 7) {
					this.FormData.priceStart = 1500;
					this.FormData.priceEnd = '';
					this.slideVal = [parseFloat(1500), parseFloat(1500)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})

				} else {
					this.FormData.priceStart = e.priceStart;
					this.FormData.priceEnd = e.priceEnd;
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				}
			},
			// 区域筛选
			clickareaShow(e, i) {
				this.FormData.islandId = e.id
				// this.areaVal = e.name
				this.regionList = []
				this.$set(this.list1[i], 'region', !this.list1[i].region)
				if (i == 0) {
					this.list1.forEach((item, index) => {
						if (index > 0 && this.list1[i].region) {
							this.$set(this.list1[index], 'region', false)
						}
					})
				} else {
					this.$set(this.list1[0], 'region', false)
				}
				let list2 = this.list1.filter(item => item.region == true)
				if (list2 != '') {
					this.areaVal = list2[0].name
				} else {
					this.areaVal = '全部'
				}


			},
			closeDate() {
				this.timeShow = false;
			},
			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					this.typeList = res.data.data.find((p) => p.dictType == 'HotelCategory').dataList;
					this.featureList = res.data.data.find((p) => p.dictType == 'FeatureLabels').dataList;
					this.featureList.forEach((item, index) => {
						this.$set(this.featureList[index], 'select', false)
					})
				})
			},

			// 重置
			del() {
				this.listShow = false //价格筛选
				this.sortShow = false //特色
				this.areaShow = false //区域
				// this.hourglassShow = false
				this.priceIndex = null;
				this.featureIndex = null;
				this.typeIndex = null;
				this.FormData.featureLabels = ''
				this.featureLabelsLIst = []
				this.regionList = []
				this.featureList.filter(item => item.select = false)
				this.list1.filter(item => item.region = false)
				this.FormData.priceSort = ''
				this.FormData.category = ''
				this.areaVal = '区域'
				this.currentIndex = 0
				this.FormData.priceStart = '';
				this.FormData.priceEnd = '';
				this.slideVal = [100, 300]
				this.$nextTick(() => {
					this.$refs.slideRange.create();
				})
				this.getData();
				this.FormData.name = ''
				this.values = ''

			},
			// 确定
			add() {

				// this.hourglassShow = false;
				this.listShow = false //价格筛选
				this.areaShow = false //三镇四乡 筛选
				this.sortShow = false //特色

				let list2 = this.list1.filter(item => item.region == true)
				list2.forEach(item => {
					this.regionList.push(item.id)
				})
				this.FormData.islandId = this.regionList.toString()
				this.regionList = []
				this.getData();



				// list2.forEach(item => {
				// 	this.areaValList.push(item.name)
				// })
				// this.FormData.areaVal = this.areaValList.toString()


				// this.areaVal = this.areaValList[0]



			},

			open() {
				// this.hourglassShow = true;
			},
			close() {
				this.hourglassShow = false;
				this.listShow = false
			},

			// 特色服务筛选
			radioFeature(item, index) {
				this.$set(this.featureList[index], 'select', !this.featureList[index].select)
			},
			// 酒店类型筛选
			radioType(item, index) {
				this.typeIndex = index;
				this.FormData.category = item
			},
			// 筛选按钮
			hourglass() {
				this.hourglassShow = true;
			},

			confirm(e) {
				let start = new Date(e[0]).getTime();
				let end = new Date(e[e.length - 1]).getTime();
				let time = end - start;
				let day = parseInt(time / (1000 * 60 * 60 * 24));
				let arriveDate = e[0]; // 截取第一个字符
				let leaveDate = e[e.length - 1]; // 截取最后一个字符

				this.FormData.arriveDate = arriveDate;
				this.FormData.leaveDate = leaveDate;

				this.arrive = arriveDate.slice(5, 7) + "-" + arriveDate.slice(8, 10);

				this.leave = leaveDate.slice(5, 7) + "-" + leaveDate.slice(8, 10);


				this.departWeek = this.weeks[new Date(e[0]).getDay()];
				this.departWeeks = this.weeks[new Date(e[e.length - 1]).getDay()];
				// 存储数据
				uni.setStorageSync('week', {
					departWeek: this.departWeek,
					departWeeks: this.departWeeks
				});

				this.count = day;
				this.timeShow = false;
				this.getData();
			},
			// 搜索
			onChanges(e) {
				// 存储数据

				this.FormData.name = e.detail.value;
				this.FormData.islandId = ''
				// this.getSearchList();
				this.getData()

			},
			click(item) {},
			// 去预订酒店
			circle() {},

			async getList() {
				let hcs = await this.getHotelCategory();
				let that = this
				this.$api.get("/api/hotel/getHomestayPage", this.FormData).then((res) => {
					if (res.data.code == 0) {

						let {
							list,
							total
						} = res.data.data;
						if (that.searchList.length + list.length > total || list.length == 0)
							return that.isOver = true;
						that.searchList = [...that.searchList, ...list];
						this.searchList.forEach(item => {
							this.category = item.category
						})
						this.searchList.forEach(item => {
							let t = hcs.find(h => h.dictValue == item.category);
							item.categorytext = t ? t.dictLabel : ''
						})
					} else that.$showToast(res.data.msg);
				});
			},

			async getData() {
				if (this.areaVal == '区域') {
					this.FormData.islandId = ''
				}

				let hcs = await this.getHotelCategory();
				this.FormData.page = 1
				this.$api.get("/api/hotel/getHomestayPage", this.FormData).then((res) => {
					this.searchList = res.data.data.list;
					this.searchList.forEach(item => {
						let t = hcs.find(h => h.dictValue == item.category);
						item.categorytext = t ? t.dictLabel : ''
					})

				});
			},
			// 获取酒店等级
			async getHotelCategory() {
				return new Promise((resolve, reject) => {
					this.$api.post('/api/dict/getListByTypes', ['HotelCategory']).then(res => {
						if (res.data.code === 0) {
							resolve(res.data.data);
						} else reject()
					})
				})
			},
			// 去酒店详情
			cardBtn(item) {
				uni.navigateTo({
					url: "/pagesTrip/hotel/details/index?list=" +
						JSON.stringify([{
							homestayId: item.id,
							name: item.name,
							...this.FormData,
						}, ]),
				});
			},

			// 获取区域
			getAddressList() {
				this.$api.get("/api/hotel/selectScenicList", this.FormData).then((res) => {
					this.AddressList = res.data.data

					this.AddressList.forEach(item => {
						this.list1.push({
							name: item.scenicName,
							id: item.id
						})
					})

					this.list1.forEach((item, index) => {
						this.$set(this.list1[index], 'region', false)
					})


				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.gray {
		filter: grayscale(100%);
		// filter: brightness(70%) !important;
		color: #AAAAAA !important;

	}

	.gray1 {
		// filter: brightness(70%) !important;
		color: #FFFFFF !important;
		background-color: #CCCCCC !important;

	}




	.content {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: relative;
	}

	.custom_popup {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		top: 0;
		left: 0;
		position: absolute;
		z-index: 999;

		.types {
			width: 100%;
			padding: 30rpx 30rpx 56rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.block-image {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				font-size: 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #111111;
				line-height: 42rpx;
			}

			.items {
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				margin-left: -24rpx;

				&>view {
					width: calc(100% / 3 - 24rpx);
					height: 64rpx;
					background: rgba(0, 122, 105, .06);
					border-radius: 16rpx;
					line-height: 64rpx;
					text-align: center;
					margin-top: 20rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #111111;
					margin-left: 24rpx;

					&.active {
						background: #007A69;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.searchCondition {
		width: 100%;
		// position: relative;
		// background-color: #f5f9fa;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		// height: 60rpx;
		// padding-top: 30rpx;

		.item {
			margin: auto auto;

			.u-icon {
				justify-content: center;
			}
		}

	}

	.pricequjian {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// height: 400rpx;
		// justify-content: end;
	}

	.Doublactive {
		background-color: #F0F7F6 !important;
		color: #007A69 !important;
		border: 1px solid #007A69 !important;

	}

	.jiage {
		margin: 0 7rpx;
		width: 22%;
		height: 68rpx;

		.contentpeice {
			border-radius: 12rpx;
			background: #F4F7F9;
			width: 100%;
			height: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 66rpx;
			text-align: center;
			font-style: normal;
			position: relative;
			box-sizing: border-box;

			.xuanzhong {
				width: 30rpx;
				height: 25rpx;
				position: absolute;
				bottom: -1rpx;
				right: -1rpx;
				border-top-left-radius: 10rpx;
				background: #007A69;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx 0 10rpx 0;

				img {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}

	}

	.jiage1 {
		margin: 0 7rpx;
		width: 30%;
		height: 68rpx;

		.contentpeice {
			border-radius: 12rpx;
			background: #F4F7F9;
			width: 100%;
			height: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 66rpx;
			text-align: center;
			font-style: normal;
			position: relative;
			box-sizing: border-box;

			.xuanzhong {
				width: 30rpx;
				height: 25rpx;
				position: absolute;
				bottom: -1rpx;
				right: -1rpx;
				border-top-left-radius: 10rpx;
				background: #007A69;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx 0 10rpx 0;

				img {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}

	}



	// .hourglas {
	// 	box-sizing: border-box;
	// 	// height: 90vh;
	// 	padding: 80rpx 48rpx 50rpx;

	.hander-one {
		.title {
			font-size: 30rpx;
			color: #111111;
			margin: 48rpx 0 24rpx;
		}

		.text {
			display: flex;
			width: 654rpx;
			flex-wrap: wrap;
		}
	}

	.u-btn {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;

		.left,
		.right {
			width: 300rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx solid #007A69;
			font-size: 32rpx;
			text-align: center;
			display: flex;
			align-items: center;

			text {
				margin: 0 119rpx;
			}
		}

		.left {
			color: #007A69;
		}

		.right {
			color: #fff;
			background-color: #007A69;
			color: #fff;
		}
	}

	.u-page__tag-item {
		// display: flex;
		color: #333333 !important;
		font-size: 24rpx !important;
		margin: 24rpx 0 0;
	}

	// }

	.u-btn {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;

		.left,
		.right {
			width: 300rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx solid #007A69;
			font-size: 32rpx;
			text-align: center;
			display: flex;
			align-items: center;

			text {
				margin: 0 119rpx;
			}
		}

		.left {
			color: #007A69;
		}

		.right {
			color: #fff;
			background-color: #007A69;
			color: #fff;
		}
	}
</style>
<style lang="less">
	.u-icon__label {
		font-size: 26rpx !important;
		font-weight: bold !important;
	}

	.u-mini {
		height: 36rpx !important;
		line-height: 36rpx !important;
	}


	.u-swiper-hander {
		position: relative;

		.star {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			z-index: 9;
		}
	}

	.nodatadiv {
		padding: 0 !important;
		height: 80vh !important;
	}

	// .u-transition {
	// 	z-index: 9 !important;
	// }

	.active {
		background-color: #F0F8F6 !important;
		color: #007A69 !important;
	}

	.cearch-list1 {
		width: 700rpx !important;
	}


	.pop-hourglassShow {

		.u-transition {
			// background-color: rgba(0, 0, 0, 0) !important;
		}

		// .u-popup__content,
		.u-transition {
			top: 100rpx !important;
		}
	}


	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-tabs {
		height: 100rpx !important;
	}

	.u-tabs__wrapper__nav__item {
		height: 100rpx !important;
	}

	.u-tabs__wrapper__nav__line {
		left: 30rpx !important;
		bottom: 1rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #0dbffd !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	.u-tag-wrapper {
		margin-right: 8rpx !important;
	}

	.u-tag__text--mini {
		line-height: 14rpx !important;
		font-size: 22rpx !important;
	}
</style>
<style lang="scss" scoped>
	.hander {
		position: fixed;
		top: 117rpx;
		height: 200rpx;
		justify-content: space-between;
	}

	.hourglas {
		box-sizing: border-box;
		// height: 90vh;
		padding: 80rpx 48rpx 50rpx;

		.hander-one {
			.title {
				font-size: 30rpx;
				color: #111111;
				margin: 48rpx 0 24rpx;
			}

			.text {
				display: flex;
				width: 654rpx;
				flex-wrap: wrap;
			}
		}

		.u-btn {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.left,
			.right {
				width: 300rpx;
				height: 88rpx;
				border-radius: 50rpx;
				border: 1rpx solid #007A69;
				font-size: 32rpx;
				text-align: center;
				display: flex;
				align-items: center;

				text {
					margin: 0 119rpx;
				}
			}

			.left {
				color: #007A69;
			}

			.right {
				color: #fff;
				background-color: #007A69;
				color: #fff;
			}
		}

		.u-page__tag-item {
			// display: flex;
			color: #333333 !important;
			font-size: 24rpx !important;
			margin: 24rpx 0 0;
		}
	}
</style>
<style lang="less">
	.u-mini {
		height: 36rpx !important;
		line-height: 36rpx !important;
	}


	.u-swiper-hander {
		position: relative;

		.star {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			z-index: 9;
		}
	}

	.nodatadiv {
		padding: 0 !important;
		// height: 100vh !important;
	}

	// .u-transition {
	// 	z-index: 9 !important;
	// }

	.active {
		background-color: #F0F8F6 !important;
		color: #007A69 !important;
	}

	.cearch-list1 {
		width: 700rpx !important;
	}


	.pop-hourglassShow {

		.u-transition {
			// background-color: rgba(0, 0, 0, 0) !important;
		}

		// .u-popup__content,
		.u-transition {
			top: 100rpx !important;
		}
	}


	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-tabs {
		height: 100rpx !important;
	}

	.u-tabs__wrapper__nav__item {
		height: 100rpx !important;
	}

	.u-tabs__wrapper__nav__line {
		left: 30rpx !important;
		bottom: 1rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	.u-tag-wrapper {
		margin-right: 8rpx !important;
	}

	.u-tag__text--mini {
		line-height: 14rpx !important;
		font-size: 22rpx !important;
	}
</style>
<style lang="scss" scoped>
	.hander {
		position: fixed;
		top: 117rpx;
		height: 200rpx;
		z-index: 10;
	}

	.hander-hander {
		background-color: #fff;
		width: 100%;
		height: 200rpx;

	}

	.search {
		display: flex;
		box-sizing: border-box;
		// padding: 48rpx 24rpx 12rpx;
		margin: 10rpx 12rpx;
		position: relative;
		z-index: 16;

		.cearch-list {
			background: #f5f8fa;
			display: flex;
			border-radius: 50rpx;
			// width: 580rpx;
			width: 100%;
			height: 86rpx;
			line-height: 30rpx;

			.search-left {
				display: flex;

				.left-one {
					margin: 15rpx 0 30rpx 30rpx;

					view {
						// display: block;
						// margin: 10rpx 10rpx;
						color: #999999;
						font-size: 22rpx;
						width: 120rpx;
					}
				}

				.left-two {
					width: 65rpx;
					// display: block;
					margin: 28rpx 10rpx;
					color: #111111;
					font-size: 20rpx;
					border-right: 1rpx solid #999999;
					padding-right: 16rpx;
					font-weight: Regular;
				}

				.left-three {
					margin: 28rpx 10rpx;
				}
			}

			.search-right {
				// background: aqua;

				.input {
					// background: #FF4141;
					width: 300rpx;
					height: 100%;
				}
			}
		}

		.cearch-hourglass {

			display: flex;
			align-items: center;
			text-align: center;
			margin: 0 10rpx;
		}


		.icon {
			font-size: 60rpx;
			position: absolute;
			right: 20%;
			top: 16rpx;
		}
	}

	.serchicon {
		width: 120rpx;

		.u-icon {
			width: 80rpx !important;
			height: 80rpx !important;
			// background-color: aqua;
		}
	}

	.tab {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		padding: 0 16rpx;
		border-top: 1rpx solid #EFEFEF;
		border-bottom: 1rpx solid #EFEFEF;
		box-sizing: border-box;
		background-color: #fff;

		.tab-list {
			width: 620rpx;
			height: 100rpx;

			.tab {
				display: flex;
				flex-wrap: nowrap;
			}
		}

		.serchicon {
			display: flex;
			align-items: center;

			.u-icon {
				width: 22rpx;
				height: 22rpx;
			}
		}
	}

	.showCard {
		padding-top: 26.5%;
		box-sizing: border-box;
		// height: 100vh;
	}

	.card {
		box-sizing: border-box;
		background: #f5f8fa;
		padding: 24rpx;
		// height: 3000rpx;
		// height: 100%;

		.card-store {
			display: flex;
			background-color: #fff;
			width: 702rpx;
			height: 240rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.card-left {
				width: 200rpx;
				height: 240rpx;
				position: relative;
				// border-radius: 10rpx 0 0 10rpx;

				image {
					// border-radius: 16rpx 0 0 16rpx;
					border-radius: 16rpx;
					width: 100%;
					height: 100%;
				}

				.text {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					color: #ffffff;
					background: #FEB000;
					border-radius: 16rpx 0 18rpx 0;
					padding: 2rpx 10rpx;
				}
			}

			.card-right {
				padding: 20rpx 24rpx;
				width: 440rpx;

				.card-title {
					width: 440rpx;
					font-size: 32rpx;
					color: #111;
					font-weight: bold;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;

				}

				.card-text {
					display: flex;
					margin: 20rpx 0;
					font-size: 24rpx;
					color: #666666;
					font-weight: Regular;

					view {
						margin: 6rpx 10rpx 4rpx;
						width: 2rpx;
						height: 20rpx;
						background-color: #D9D9D9;
					}
				}

				.card-text1 {
					margin: 20rpx 0 20rpx;

					display: flex;
					height: 36rpx;

					text {
						display: inline-block;
						padding: 0 8rpx;
						height: 36rpx;
						line-height: 36rpx;
						color: #C9A771;
						border: 1rpx solid #DCC7AB;
						border-radius: 4rpx;
						margin-right: 12rpx;
						font-size: 22rpx;
					}

				}

				.card-price {
					// margin-top: 4rpx;
					// font-weight: Bold;
					// padding: 10rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #FF4141;
				}
			}
		}
	}

	.card1 {
		box-sizing: border-box;
		background: #f5f8fa;
		padding: 24rpx;
		// height: 3000rpx;
		height: 100%;
	}

	.ticketList {
		width: 702rpx;
		// height: 592rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 25rpx;
		padding-bottom: 24rpx;


		.card-text {
			display: flex;
			margin: 16rpx 24rpx;
			font-size: 24rpx;
			color: #666666;
			font-weight: Regular;

			view {
				margin: 6rpx 10rpx 4rpx;
				width: 2rpx;
				height: 20rpx;
				background-color: #D9D9D9;
			}
		}

		.images {
			border-radius: 16rpx 16rpx 0 0;
			width: 702rpx;
			height: 396rpx;
			position: relative;
		}

		.care {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			z-index: 9;
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&_tag {
			display: flex;
			margin: 20rpx;
		}

		text {}

		&_price {
			display: flex;
			justify-content: space-between;

			button {
				margin-right: 24rpx;
				margin-top: -15rpx;
			}

			&_money {
				width: 92rpx;
				height: 28rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #ff4141;
				line-height: 28rpx;
				display: flex;
				margin-left: 24rpx;
				margin-top: 14rpx;
			}
		}
	}
</style>